<template>
    <div>
        <el-container>
            <el-main>
                <div class="report">
                    <p>
                        咨询记录表
                    </p>
                </div>
                <div clss="report-info-body">
                    <div>
                        <el-table fixed  stripe style="width: 100%" max-height="500"
                                  :data="reportForm.slice((currentPage-1)*PageSize,currentPage*PageSize)">
                            <el-table-column prop="tea_name" label="咨询师" align="center"></el-table-column>
                            <el-table-column prop="stu_name" label="学生姓名" align="center"></el-table-column>
                            <el-table-column prop="week_name" label="工作日" align="center"></el-table-column>
                            <el-table-column prop="detail_time" label="时间段" align="center"></el-table-column>
                            <el-table-column prop="currentWeek" label="当前周数" align="center"></el-table-column>
                            <el-table-column prop="recordStatusString" label="咨询状态" align="center"></el-table-column>
                            <el-table-column align="center" label="操作" fixed="right" width="200">
                                <template #default="scope">
                                    <el-button size="mini" type="primary" @click="EditForm(scope.$index, scope.row)" style="background-color: #409EFF;border-color: #409EFF;color:#fff;">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                    :hide-on-single-page="value"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="PageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="reportForm.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <div>
                    <el-dialog title="咨询记录表" v-model="dialogTableVisible" :before-close="handleClose">
                        <el-form :model="formData">
                            <el-form-item label="咨询师" prop="tea_name" style="width: 80%;" >
                                <el-input name="tea_name" v-model="formData.tea_name" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="学生姓名" prop="stu_name" style="width: 80%;">
                                <el-input name="stuName" v-model="formData.stuName" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="工作日" prop="week_name" style="width: 80%;">
                                <el-input name="week_name" v-model="formData.week_name" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="时间段" prop="detail_time" style="width: 80%;">
                                <el-input name="detail_time" v-model="formData.detail_time" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="当前周数" prop="currentWeek" style="width: 80%;">
                                <el-input name="currentWeek" v-model="formData.currentWeek" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="咨询状态" prop="recordStatusString" style="width: 80%;">
                                <el-select v-model="formData.recordStatusString" >
                                    <el-option
                                            v-for="item in Level"
                                            :label="item.dataValue"
                                            :value="item.dataKey"
                                            :key="item.dataKey"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <el-button @click="dialogTableVisible = false">取消</el-button>
                            <el-button type="primary" @click="EditSubmit">提交</el-button>
                        </template>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import request from "../../utils/request";
    import {ElMessage} from "element-plus";

    export default {
        name: "recordlog",
        data(){
            return{
              tempId:'',
                disabled:true,
                dialogTableVisible : false,
                value:true,
                Level:[],

                currentPage:1,
                PageSize:10,
                reportForm:[{
                    detail_time:'',
                    id:'',
                    recordStatusString: '',
                    stuId: '',
                    stu_name: '',
                    teaId: '',
                    tea_name: '',
                    week_name: '',
                    currentWeek:'',
                }],
                formData:{
                    detail_time:'',
                    id:'',
                    recordStatusString: '',
                    stuId: '',
                    stu_name: '',
                    teaId: '',
                    tea_name: '',
                    week_name: '',
                    currentWeek:'',
                }
            }
        },

        methods :{

            //编辑接口
            editRecordlog(id,s){
                return request({
                    url:'/api/recordLog/changeRecordxxn',
                    method:'put',
                    params:{
                      id:id,
                      status:s
                    }
                })
            },

            //编辑提交
            async EditSubmit(){
                this.dialogTableVisible =false
                await console.log(this.formData)
                this.editRecordlog(this.tempId,this.formData.recordStatusString).then(res=>{
                    if(res.code === 1 ) {
                        console.log(res)
                        this.getData()
                        ElMessage.success(res.message)
                    }else{
                        ElMessage.error(res.message);
                    }
                })
                console.log('提交')
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.PageSize = val
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
            },

            EditForm : function (index,row) {
              this.tempId = row.id
              console.log(row)
                this.dialogTableVisible = true;
                this.formData = Object.assign({},row);
            },


            getrecordReport(){
                return request({
                    url:'/api/recordLog/getall/',
                    method:'get'
                })
            },

            getlevel(){
                return request({
                    url:'/api/recordLog/getdicttypefour',
                    method:'get'
                })
            },

            get_Level(){
                this.getlevel().then(res => {
                    if(res.code ===1) {
                        this.Level = res.data;
                        console.log(res.data)
                    }
                })
            },
            //获取数据
            getData(){
                this.getrecordReport().then(res => {
                    if(res.code ===1) {
                        this.reportForm = res.data;
                        console.log(res.data)
                    }
                })
            },
        },
        created() {
            this.getData()
            this.get_Level()
        }
    }
</script>

<style scoped>
    .report {
        width: auto;
        height: 56px;
        background-color: #EDEFF2;
        font-size: 22px;
        /* font-family: SimHei; */
        font-weight: 400;
        color: #333333;
        line-height: 48px;
        border-left: 6px solid #409EFF;
        text-align: left;
    }
</style>